<!--
 * @Descripttion: 
 * @Version: 1.0
 * @Author: wcl
 * @Date: 2023-11-22 10:45:32
 * @LastEditors: wcl
 * @LastEditTime: 2023-11-22 11:32:28
-->
<template>
    <div>
        <a-modal v-model:open="modalOpen" :title="title" width="50%" :footer="null">
            <a-space direction="vertical" style="width: 100%" :size="16">
                <a-form :model="formData" ref="formRef" :rules="rules" labelAlign="left" :label-col="{ span: 3 }" :wrapper-col="{ span: 16 }">
                    <a-form-item label="会员名称" name="name">
                        <a-input v-model:value="formData.name" placeholder="输入会员名称" />
                    </a-form-item>
                    <a-form-item label="会员价格" name="price">
                        <a-input v-model:value="formData.price" min="0" type="number" placeholder="输入会员价格" suffix="元" />
                    </a-form-item>
                    <a-form-item label="有效天数" name="dayNum">
                        <a-input v-model:value="formData.dayNum" min="0" type="number" placeholder="输入有效天数" suffix="天" />
                    </a-form-item>
                    <a-form-item label="是否开通" name="type">
                        <a-select ref="select" v-model:value="formData.type" placeholder="请选择是否开通">
                            <a-select-option :value="1">未开通</a-select-option>
                            <a-select-option :value="0">已开通</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-form>
                <div class="modal-but-layout">
                    <a-space wrap>
                        <a-popconfirm title="您是否要数据重置?" ok-text="是" cancel-text="否" @confirm="confirm">
                            <a-button>重置</a-button>
                        </a-popconfirm>
                        <a-button type="primary" @click="handleSubmit">提交</a-button>
                    </a-space>
                </div>
            </a-space>
        </a-modal>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import { saveVipConfig } from '@/api/member'
const modalOpen = ref(false)
const formRef = ref(null)
const formData = ref({
    name: undefined,
    price: undefined,
    dayNum: undefined,
    type: 1,
})
const rules = {
    name: [{ required: true, message: '请输入会员名称' }],
    price: [{ required: true, message: '请输入会员价格' }],
    dayNum: [{ required: true, message: '请输入有效天数' }],
    type: [{ required: true, message: '请选择会员状态' }],
}
const title = ref(null)
const open = (titles) => {
    modalOpen.value = true
    title.value = titles
}
const handleSubmit = async (res) => {
    formRef.value.validate().then( async (res) => {
        const data = await saveVipConfig(formData.value)
        if (data.code === 200) {
            modalOpen.value = false
            formRef.value.resetFields()
        }
    })
}
const confirm = () => {
    formData.value = {
        name: undefined,
        price: undefined,
        dayNum: undefined,
        type: 1,
    }
}
defineExpose({ modalOpen, open })
</script>
<style lang="scss" scoped></style>